<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/libs/axios.js"></script>
    <script src="/js/libs/vue.js"></script>
    <script src="/js/libs/jq3.6.js"></script>

    <link href="/css/libs/bootstarp@5.1.3_min.css" rel="stylesheet"
          crossorigin="anonymous">
    <link rel="stylesheet" href="/css/libs/http_cdn.jsdelivr.net_npm_bootstrap@4.6.2_dist_css_bootstrap.css"
          crossorigin="anonymous">
    <link rel="stylesheet" href="/css/main.css">
    <title>QQ代挂-api调用管理</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light tm-0">
    <a class="navbar-brand" href="/">
        <img style="opacity: 0.86;max-width: 50px; border-radius: 999px"
             class="navbar-brand" src="/icon" alt="qq"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">QQ代挂 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://kloping.top/">kloping's</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">更多功能;敬请期待.</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <a class="dropdown-item" target="_blank" href="https://github.com/gdpl2112/dg-bot">
                <img style="opacity: 0.86;max-width: 35px" alt="github" loading="lazy"
                     src="https://s.nmxc.ltd/sakurairo_vision/@2.6/display_icon/sora/github.png">
                github 开源地址
            </a>
        </form>
    </div>
</nav>
<br>
<hr>
<br>
<div class="modal fade" id="appendModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加一个API</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="inputGroup-out">输出格式</span>
                    <input type="text" class="form-control" aria-label="Sizing example input">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="inputGroup-outArgs">输出参数</span>
                    <input placeholder="用,分割参数(英文" type="text" class="form-control"
                           aria-label="Sizing example input">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="inputGroup-touch">触发词</span>
                    <input type="text" class="form-control" aria-label="Sizing example input">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="inputGroup-url">网址</span>
                    <input type="text" class="form-control" aria-label="Sizing example input">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="inputGroup-jude">否条件</span>
                    <input type="text" class="form-control" aria-label="Sizing example input">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="submit0()">确定</button>
            </div>
        </div>
    </div>
</div>
<br>
<div class="container">
    <div class="row">
        <div class="center-block">
            <div style="text-align: center;">
                <button onclick="add0()" type="button" class="btn btn-primary btn-lg btn-block" data-bs-toggle="modal">
                    添加
                </button>
            </div>
            <br>
            <hr>
        </div>
    </div>
</div>
<div class="container bg-light">
    <div class="row">
        <div id="table_main" class="center-block">
            <small class="form-text text-muted">此命令开关与被动回复开关一致</small>
            <div class="container">
                <hr>
                <div class="row ">
                    <div class="col-8">
                        <ul class="list-group">
                            <li class="list-group-item disabled" aria-disabled="true">输出格式</li>
                            <li class="list-group-item disabled" aria-disabled="true">输出参数</li>
                            <li class="list-group-item disabled" aria-disabled="true">触发词</li>
                            <li class="list-group-item disabled" aria-disabled="true">地址</li>
                            <li class="list-group-item disabled" aria-disabled="true">不输出条件</li>
                        </ul>
                    </div>
                    <div class="col-4">操作</div>
                </div>
                <div v-for="(e) in data" :class="getTrClass()+' row'" style="margin-top: 15px;padding-bottom: 10px;padding-top: 10px">
                    <div class="col-8">
                        <ul class="list-group">
                            <li class="list-group-item" style="overflow:scroll;" v-text="e.out">输出格式</li>
                            <li class="list-group-item" v-text="getStrArgs(e.outArgs)">输出参数</li>
                            <li class="list-group-item" v-text="e.touch">触发词</li>
                            <li class="list-group-item" style="overflow:scroll;" v-text="e.url">地址</li>
                            <li class="list-group-item" style="overflow:scroll;" v-text="e.jude">不输出条件</li>
                        </ul>
                    </div>
                    <div class="col-4">
                        <img class="rounded img-fluid img-responsive" :src="getFavicon(e)"  style="max-width: 90px">
                        <hr> <button v-on:click="delete0(e.touch)" type="button" class="btn btn-danger col">删除</button>
                        <hr><button v-on:click="modify0(e)" type="button" class="btn btn-primary col">修改</button>
                    </div>
                </div>
            </div>
    </div>
</div>
<script>
    let e_out = $("#inputGroup-out").next();
    let e_outArgs = $("#inputGroup-outArgs").next();
    let e_touch = $("#inputGroup-touch").next();
    let e_url = $("#inputGroup-url").next();
    let e_jude = $("#inputGroup-jude").next();
    function submit0() {
        let v1 = encodeURIComponent(e_out.val())
        let v2 = encodeURIComponent(e_outArgs.val())
        let v3 = encodeURIComponent(e_touch.val())
        let v4 = encodeURIComponent(e_url.val())
        let v5 = encodeURIComponent(e_jude.val())
        let url = "/ca/append?out=" + v1
                + "&outArgs=" + v2
                + "&touch=" + v3
                + "&url=" + v4
                + "&jude=" + v5
        ;

        axios.post(url).then(function (response) {
            trIndex = 0;
            vm1.data = response.data;
            e_out.val("")
            e_outArgs.val("")
            e_touch.val("")
            e_url.val("")
            e_jude.val("")
        }).catch(function (err) {
            alert(err);
        })
    }

    function add0() {
        $('#exampleModalLabel').html('添加一个API');
        $('#appendModal').modal('show')
        e_out.val("")
        e_outArgs.val("")
        e_touch.val("")
        e_url.val("")
        e_jude.val("")
    }

    let trClasses = ["alert-primary", "alert-secondary", "alert-success", "alert-danger", "alert-warning", "alert-info", "alert-light", "alert-dark"];
    let trIndex = 0

    let vm1 = new Vue({
        el: "#table_main",
        created: function () {
            axios.get("/ca/get_data").then(function (response) {
                trIndex = 0;
                vm1.data = response.data;
            }).catch(function (err) {
                alert(err);
            })
        }, data: {
            data: [],
        }, methods: {
            getFavicon: function (e) {
                let u0 = e.url;
                let i0 = u0.substr(8).indexOf("/")
                return u0.substr(0, 9 + i0) + "favicon.ico"
            }, delete0: function (touch) {
                axios.get("/ca/delete?touch=" + touch).then(function (response) {
                    trIndex = 0;
                    vm1.data = response.data;
                }).catch(function (err) {
                    alert(err);
                })
            }, modify0: function (e) {
                e_out.val(e.out)
                e_outArgs.val(e.outArgs)
                e_touch.val(e.touch)
                e_url.val(e.url)
                e_jude.val(e.jude)
                $('#exampleModalLabel').html('修改一个API');
                $('#appendModal').modal('show')
            }, getTrClass: function () {
                return trClasses[trIndex++ % trClasses.length].toString()
            }, getStrArgs: function (args) {
                let out = "";
                args.split(",").forEach(function (e) {
                    out = out + e + "\n";
                })
                return out.trim()
            }
        }
    });
</script>
<br>
<script src="/js/libs/http_cdn.jsdelivr.net_npm_jquery@3.5.1_dist_jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="/js/libs/http_cdn.jsdelivr.net_npm_bootstrap@4.6.2_dist_js_bootstrap.bundle.js"
        crossorigin="anonymous"></script>
<script src="/js/libs/http_cdn.jsdelivr.net_npm_bootstrap@5.1.3_dist_js_bootstrap.bundle.js"
        crossorigin="anonymous"></script>
</body>
</html>